<template>
	<div class="bg">
		<div class="loginCart">
			<h5>用户登录</h5>
			<el-form :model="loginForm" size="mini" :rules="loginrules">
				<el-form-item prop="email">
					<el-input v-model="loginForm.email" placeholder="邮箱"></el-input>
				</el-form-item>
				<el-form-item prop="pwd">
					<el-input v-model="loginForm.pwd" placeholder="密码"></el-input>
				</el-form-item>
				<el-checkbox label="记住账户密码" v-model="checked"></el-checkbox>
				<el-button type="primary" plain size="mini" @click="login">登录</el-button>
				<div class="forgetPassword"><a href="javescript:void(0)">忘记密码？</a></div>
				<div><span>没有账户？</span> <router-link to="/register">立即注册</router-link></div>
			</el-form>
		</div>
	</div>
</template>
<script>
export default {
  name: 'login',
  components: {},
  data () {
    // 自定义的邮箱和手机验证规则
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      // const regMobile = /^1[3|4|5|7|8][0-9]{9}$/
      // regEmail.test(value) |
      // else if (regMobile.test(value)) {
      //   callback()
      // }
      if (!value) {
        return callback(new Error('电话号码或邮箱不能为空'))
      } else if (mailReg.test(value)) {
        callback()
      } else {
        return callback(new Error('请输入合法的手机和邮箱'))
      }
    }
    // 自定义的密码验证规则
    var validPassword = (rule, value, callback) => {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
      if (!reg.test(value)) {
        callback(new Error('密码必须是由4-20位字母+数字组合'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        email: '',
        pwd: ''
      },
      checked: false,
      namePassword: [],
      // 验证规则
      loginrules: {
        email: [{ validator: checkEmail, trigger: 'blur' }],
        pwd: [{ validator: validPassword, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 接口
    async login () {
      const result = await this.$ajax.post('login', {
        query: this.loginForm
      })
      console.log(result)
      this.$router.push({ name: 'index', params: { email: this.loginForm.email } })
    }
  }
}
</script>
<style>
.bg {
	background-image: url('../assets/images/login.jpg');
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: #fff;
}

.loginCart {
	background-color: rgba(255, 255, 255, 0.3);
	width: 350px;
	height: 355px;
	margin: 200px auto;
	border-radius: 5px;
	overflow: hidden;
}
h5 {
	font-size: 20px;
	margin: 0;
	padding: 20px;
	border-bottom: 1px #fff solid;
}
.el-form {
	width: 85%;
	margin: 30px auto;
}
.el-checkbox {
	color: #fff;
}
.el-button {
	margin-top: 20px;
}
.forgetPassword {
	text-align: right;
	margin: 5px 0;
}
.forgetPassword a {
	color: #fff;
	font-size: 12px;
}
.el-button--mini,
.el-button--mini.is-round {
	padding: 7px 87px;
}

/* 复选框样式重写 */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	/* 复选框背景 */
	background-color: #fff;
	/* border-color: gray; */
}
/* 文本 */
.el-checkbox__input.is-checked + .el-checkbox__label {
	color: #fff;
}
/* .el-checkbox.is-bordered.is-checked {
	border-color: rgb(224, 181, 181);
} */
/* .el-checkbox__input.is-focus .el-checkbox__inner {
	border-color: #dde;
} */
.el-checkbox__inner::after {
	border-color: rgb(77, 65, 236);
}
</style>
